<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日吸猫 | 随机猫咪</title>
    <style>
        /* 全局样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            min-height: 100vh;
            background-attachment: fixed;
        }
        
        /* 导航栏样式 */
        .navbar {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 15px 30px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1300px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .nav-tabs {
            display: flex;
            gap: 20px;
        }
        
        .nav-tab {
            padding: 10px 20px;
            background: transparent;
            border: 2px solid #ff69b4;
            color: #ff69b4;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .nav-tab.active {
            background: #ff69b4;
            color: white;
        }
        
        .nav-tab:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #ff69b4;
        }
        
        /* 社区模块样式 */
        .community-section {
            display: none;
            text-align: left;
        }

        .community-section.active {
            display: block;
        }

        .user-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .user-card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .user-card:hover {
            transform: translateY(-5px);
        }

        .user-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .user-avatar-large {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 15px;
            border: 3px solid #ff69b4;
        }

        .user-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .user-photos {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
        }

        .user-photo {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .user-photo:hover {
            transform: scale(1.05);
        }

        /* 容器样式 */
        .container {
            max-width: 1300px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 40px 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }

        /* 背景装饰 */
        .container::before {
            content: '';
            position: absolute;
            top: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(255,105,180,0.2) 0%, rgba(255,105,180,0) 70%);
            border-radius: 50%;
            z-index: 0;
        }

        .container::after {
            content: '';
            position: absolute;
            bottom: -150px;
            left: -150px;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(147,112,219,0.2) 0%, rgba(147,112,219,0) 70%);
            border-radius: 50%;
            z-index: 0;
        }

        /* 猫咪容器 */
        .cat-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin: 30px auto;
            position: relative;
            z-index: 1;
        }

        /* 猫咪卡片 */
        .cat-card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            display: none;
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;
        }

        .cat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0,0,0,0.2);
        }

        .cat-image {
            width: 100%;
            height: 280px;
            object-fit: cover;
            border-bottom: 4px solid #ff69b4;
        }

        /* 按钮样式 */
        button {
            padding: 12px 24px;
            font-size: 16px;
            font-weight: bold;
            background-color: #ff69b4;
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            margin: 5px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        button:hover::before {
            width: 300px;
            height: 300px;
        }

        button:hover {
            background-color: #ff1493;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
        }

        button:active {
            transform: translateY(0);
        }

        button.secondary {
            background-color: #9370db;
        }

        button.secondary:hover {
            background-color: #7b68ee;
            box-shadow: 0 5px 15px rgba(147, 112, 219, 0.4);
        }

        button.danger {
            background-color: #ff6347;
        }

        button.danger:hover {
            background-color: #ff4500;
            box-shadow: 0 5px 15px rgba(255, 99, 71, 0.4);
        }

        /* 加载状态 */
        .loading {
            color: #666;
            margin: 30px 0;
            font-size: 18px;
            font-weight: bold;
        }

        /* 点赞按钮 */
        .like-button {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.9);
            color: #ff69b4;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            z-index: 2;
        }

        .like-button:hover {
            transform: scale(1.1);
            background-color: rgba(255, 255, 255, 1);
        }

        .like-button.liked {
            background-color: #ff69b4;
            color: white;
            animation: heartBeat 0.6s ease;
        }

        @keyframes heartBeat {
            0% { transform: scale(1); }
            30% { transform: scale(1.3); }
            50% { transform: scale(0.9); }
            70% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        /* 用户信息 */
        .user-info {
            margin-bottom: 30px;
            color: #666;
            font-size: 18px;
            position: relative;
            z-index: 1;
        }

        /* 标题样式 */
        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 3rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            position: relative;
            z-index: 1;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        p {
            font-size: 18px;
            margin-bottom: 20px;
            color: #555;
            position: relative;
            z-index: 1;
        }

        .hidden {
            display: none;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 20px 15px;
                margin: 10px;
                border-radius: 15px;
            }

            .navbar {
                padding: 10px 15px;
                flex-direction: column;
                gap: 15px;
            }

            .nav-tabs {
                flex-wrap: wrap;
                justify-content: center;
            }

            h1 {
                font-size: 2.2rem;
            }

            .cat-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .user-gallery {
                grid-template-columns: 1fr;
            }

            .cat-image {
                height: 200px;
            }
        }
    /* 彩蛋按钮和弹窗样式 */
    .easter-egg-button {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: #ff9a9e;
        color: white;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(255, 154, 158, 0.4);
        transition: all 0.3s ease;
        z-index: 3;
    }
    
    .easter-egg-button:hover {
        transform: scale(1.1);
        background-color: #ff6b81;
        box-shadow: 0 6px 16px rgba(255, 107, 129, 0.5);
    }
    
    .easter-egg-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s ease;
    }
    
    .easter-egg-content {
        background-color: white;
        border-radius: 20px;
        padding: 30px;
        max-width: 500px;
        text-align: center;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        animation: slideIn 0.4s ease;
        position: relative;
    }
    
    .easter-egg-image {
        max-width: 100%;
        border-radius: 15px;
        margin: 20px 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .easter-egg-text {
        font-size: 18px;
        color: #333;
        margin-bottom: 20px;
        font-weight: bold;
    }
    
    .close-button {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #999;
        padding: 5px;
        width: auto;
        height: auto;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: none;
    }
    
    .close-button:hover {
        color: #333;
        background-color: #f5f5f5;
        transform: none;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* 社区相关样式 */
    .upload-form {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        padding: 30px;
        margin: 20px 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border: 2px solid rgba(147, 112, 219, 0.3);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #333;
    }

    .form-group input[type="file"],
    .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 2px solid rgba(147, 112, 219, 0.3);
        border-radius: 8px;
        font-size: 16px;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.8);
    }

    .form-group input[type="file"]:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #ff69b4;
        background: white;
        box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
    }

    .community-photos-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 30px;
        margin-top: 30px;
    }

    .community-photo-card {
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
    }

    .community-photo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.2);
    }

    .community-photo-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-bottom: 4px solid #ff69b4;
    }

    .community-photo-info {
        padding: 20px;
    }

    .community-photo-user {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .community-user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 10px;
        border: 2px solid #ff69b4;
    }

    .community-username {
        font-weight: bold;
        color: #333;
    }

    .community-photo-description {
        color: #666;
        margin-bottom: 15px;
        line-height: 1.4;
    }

    .community-photo-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #999;
    }

    .community-like-button {
        background: none;
        border: none;
        color: #999;
        cursor: pointer;
        font-size: 18px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .community-like-button:hover {
        color: #ff69b4;
    }

    .community-like-button.liked {
        color: #ff69b4;
    }

    .community-delete-button {
            background: #ff6347;
            color: white;
            border: none;
            border-radius: 15px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .community-delete-button:hover {
            background: #ff4500;
            transform: scale(1.05);
        }

        .photo-actions {
            display: flex;
            gap: 8px;
            align-items: center;
            flex-wrap: wrap;
        }

        .community-download-button {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s ease;
        }

        .community-download-button:hover {
            background-color: #1976D2;
            transform: translateY(-1px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .community-download-button:active {
            transform: translateY(0);
            box-shadow: none;
        }

        /* 下载通知动画 */
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

    .hidden {
        display: none;
    }

    </style>
</head>
<body>
<!-- 导航栏 -->
<div class="navbar">
    <div class="nav-tabs">
        <button class="nav-tab active" data-tab="random-cats">随机猫咪</button>
        <button class="nav-tab" data-tab="community">社区</button>
    </div>
    <img src="/touxiang.jpg" alt="用户头像" class="user-avatar">
</div>

<!-- 随机猫咪模块 -->
<div class="container">
    <button id="easter-egg-button" class="easter-egg-button">✨</button>
    <h1>😻 每日吸猫 随机猫咪生成器 😻</h1>
    <div id="user-info" class="user-info">
        <span id="welcome-message"></span>
        <button id="my-likes-button" class="secondary">我的喜欢</button>
        <button id="logout-button" class="danger">退出登录</button>
    </div>
    <p>点击按钮，收获一群可爱的猫咪！每一张都是独一无二的喵星人哦~</p>
    <button id="get-cat">给我一群猫！</button>
    <p id="loading-text" class="loading"></p>
    <div id="cat-container" class="cat-container"></div>
    <div id="my-likes-container" class="cat-container hidden"></div>
</div>

<!-- 社区模块 -->
<div id="community-section" class="container hidden">
    <h1>😺 猫咪社区</h1>
    <div id="community-user-info" class="user-info">
        <span id="community-welcome-message"></span>
        <button id="upload-photo-button" class="secondary">上传照片</button>
        <button id="my-photos-button" class="secondary">我的照片</button>
        <button id="popular-photos-button" class="secondary">热门照片</button>
        <button id="all-photos-button" class="secondary">全部照片</button>
    </div>
    
    <!-- 照片上传表单 -->
    <div id="upload-form" class="upload-form hidden">
        <h3>上传猫咪照片</h3>
        <form id="photo-upload-form" enctype="multipart/form-data">
            <div class="form-group">
                <label for="photo-file">选择照片：</label>
                <input type="file" id="photo-file" name="file" accept="image/*" required>
            </div>
            <div class="form-group">
                <label for="photo-description">照片描述：</label>
                <textarea id="photo-description" name="description" placeholder="描述一下你的猫咪照片..." rows="3"></textarea>
            </div>
            <button type="submit" class="primary">上传照片</button>
            <button type="button" id="cancel-upload" class="danger">取消</button>
        </form>
    </div>
    
    <!-- 社区照片展示 -->
    <div id="community-photos-container" class="community-photos-container">
        <p id="community-loading-text" class="loading">加载社区照片中...</p>
        <div id="community-photos-grid" class="community-photos-grid"></div>
    </div>
</div>


<!-- 彩蛋弹窗 -->
<div id="easter-egg-modal" class="easter-egg-modal">
    <div class="easter-egg-content">
        <button id="close-modal" class="close-button">&times;</button>
        <h3>喵~ 发现彩蛋啦！</h3>
        <img src="/IMG_20250117_224949.jpg" alt="用户的猫猫" class="easter-egg-image">
        <p class="easter-egg-text">这是我的猫猫，它很可爱Ovo</p>
    </div>
</div>

<script>

    // 获取当前登录用户名
    function getCurrentUsername() {
        const welcomeMessage = document.getElementById('welcome-message');
        if (welcomeMessage && welcomeMessage.textContent.includes('欢迎')) {
            // 从欢迎消息中提取用户名
            const match = welcomeMessage.textContent.match(/欢迎，(.+)！/);
            return match ? match[1] : 'admin'; // 默认使用admin
        }
        return 'admin'; // 默认用户名
    }
    







    // 彩蛋功能
    const easterEggButton = document.getElementById('easter-egg-button');
    const easterEggModal = document.getElementById('easter-egg-modal');
    const closeModalButton = document.getElementById('close-modal');
    
    // 显示彩蛋弹窗
    easterEggButton.addEventListener('click', function() {
        easterEggModal.style.display = 'flex';
    });
    
    // 关闭彩蛋弹窗
    closeModalButton.addEventListener('click', function() {
        easterEggModal.style.display = 'none';
    });
    
    // 点击弹窗外部关闭
    easterEggModal.addEventListener('click', function(event) {
        if (event.target === easterEggModal) {
            easterEggModal.style.display = 'none';
        }
    });
    
    // 按ESC键关闭弹窗
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape' && easterEggModal.style.display === 'flex') {
            easterEggModal.style.display = 'none';
        }
    });

    // 页面加载完成后初始化社区功能
    document.addEventListener('DOMContentLoaded', function() {
        setupCommunityFeatures();
    });

    // 初始化社区功能
    function setupCommunityFeatures() {
        setupTabNavigation();
        setupUploadForm();
        loadCommunityPhotos();
    }

    // 设置标签页导航
    function setupTabNavigation() {
        const tabs = document.querySelectorAll('.nav-tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有标签的active类
                tabs.forEach(t => t.classList.remove('active'));
                // 添加当前标签的active类
                this.classList.add('active');
                
                // 显示对应的内容
                const tabName = this.getAttribute('data-tab');
                if (tabName === 'random-cats') {
                    document.querySelector('.container').classList.remove('hidden');
                    document.getElementById('community-section').classList.add('hidden');
                } else if (tabName === 'community') {
                    document.querySelector('.container').classList.add('hidden');
                    document.getElementById('community-section').classList.remove('hidden');
                    loadCommunityPhotos();
                }
            });
        });
    }

    // 设置上传表单
    function setupUploadForm() {
        const uploadButton = document.getElementById('upload-photo-button');
        const uploadForm = document.getElementById('upload-form');
        const cancelUpload = document.getElementById('cancel-upload');
        const photoUploadForm = document.getElementById('photo-upload-form');
        
        if (uploadButton && uploadForm) {
            uploadButton.addEventListener('click', function() {
                uploadForm.classList.toggle('hidden');
            });
        }
        
        if (cancelUpload) {
            cancelUpload.addEventListener('click', function() {
                uploadForm.classList.add('hidden');
                photoUploadForm.reset();
            });
        }
        
        if (photoUploadForm) {
            photoUploadForm.addEventListener('submit', function(e) {
                e.preventDefault();
                uploadPhoto();
            });
        }

        // 设置照片查看按钮
        const myPhotosButton = document.getElementById('my-photos-button');
        const popularPhotosButton = document.getElementById('popular-photos-button');
        const allPhotosButton = document.getElementById('all-photos-button');
        
        if (myPhotosButton) {
            myPhotosButton.addEventListener('click', function() {
                loadUserPhotos();
            });
        }
        
        if (popularPhotosButton) {
            popularPhotosButton.addEventListener('click', function() {
                loadPopularPhotos();
            });
        }
        
        if (allPhotosButton) {
            allPhotosButton.addEventListener('click', function() {
                loadCommunityPhotos();
            });
        }
    }

    // 上传照片
    async function uploadPhoto() {
        const fileInput = document.getElementById('photo-file');
        const descriptionInput = document.getElementById('photo-description');
        const username = getCurrentUsername();
        
        if (!fileInput.files.length) {
            alert('请选择要上传的照片');
            return;
        }
        
        const formData = new FormData();
        formData.append('file', fileInput.files[0]);
        formData.append('username', username);
        formData.append('description', descriptionInput.value);
        
        try {
            const response = await fetch('/api/community/upload', {
                method: 'POST',
                body: formData
            });
            
            const result = await response.json();
            
            if (result.success) {
                alert('照片上传成功！');
                document.getElementById('upload-form').classList.add('hidden');
                document.getElementById('photo-upload-form').reset();
                loadCommunityPhotos();
            } else {
                alert('上传失败：' + result.message);
            }
        } catch (error) {
            alert('上传失败：' + error.message);
        }
    }

    // 加载社区照片
    async function loadCommunityPhotos() {
        const loadingText = document.getElementById('community-loading-text');
        const photosGrid = document.getElementById('community-photos-grid');
        
        if (loadingText) loadingText.style.display = 'block';
        if (photosGrid) photosGrid.innerHTML = '';
        
        try {
            const response = await fetch('/api/community/photos');
            const photos = await response.json();
            
            displayCommunityPhotos(photos);
        } catch (error) {
            console.error('加载社区照片失败：', error);
            if (photosGrid) photosGrid.innerHTML = '<p>加载失败，请刷新页面重试</p>';
        } finally {
            if (loadingText) loadingText.style.display = 'none';
        }
    }

    // 加载用户照片
    async function loadUserPhotos() {
        const username = getCurrentUsername();
        const loadingText = document.getElementById('community-loading-text');
        const photosGrid = document.getElementById('community-photos-grid');
        
        if (loadingText) loadingText.style.display = 'block';
        if (photosGrid) photosGrid.innerHTML = '';
        
        try {
            const response = await fetch(`/api/community/photos/user?username=${encodeURIComponent(username)}`);
            const photos = await response.json();
            
            displayCommunityPhotos(photos);
        } catch (error) {
            console.error('加载用户照片失败：', error);
            if (photosGrid) photosGrid.innerHTML = '<p>加载失败，请刷新页面重试</p>';
        } finally {
            if (loadingText) loadingText.style.display = 'none';
        }
    }

    // 加载热门照片
    async function loadPopularPhotos() {
        const loadingText = document.getElementById('community-loading-text');
        const photosGrid = document.getElementById('community-photos-grid');
        
        if (loadingText) loadingText.style.display = 'block';
        if (photosGrid) photosGrid.innerHTML = '';
        
        try {
            const response = await fetch('/api/community/photos/popular');
            const photos = await response.json();
            
            displayCommunityPhotos(photos);
        } catch (error) {
            console.error('加载热门照片失败：', error);
            if (photosGrid) photosGrid.innerHTML = '<p>加载失败，请刷新页面重试</p>';
        } finally {
            if (loadingText) loadingText.style.display = 'none';
        }
    }

    // 显示社区照片
    function displayCommunityPhotos(photos) {
        const photosGrid = document.getElementById('community-photos-grid');
        if (!photosGrid) return;
        
        if (!photos || photos.length === 0) {
            photosGrid.innerHTML = '<p>暂无照片，快来上传第一张猫咪照片吧！</p>';
            return;
        }
        
        photosGrid.innerHTML = photos.map(photo => `
            <div class="community-photo-card" data-photo-id="${photo.id}">
                <img src="${photo.photoUrl}" alt="猫咪照片" class="community-photo-image" onerror="this.src='/touxiang.jpg'">
                <div class="community-photo-info">
                    <div class="community-photo-user">
                        <img src="/touxiang.jpg" alt="用户头像" class="community-user-avatar">
                        <span class="community-username">${photo.username}</span>
                    </div>
                    <p class="community-photo-description">${photo.description || '这只猫咪真可爱！'}</p>
                    <div class="community-photo-meta">
                        <span>${new Date(photo.createdAt).toLocaleDateString()}</span>
                        <div class="photo-actions">
                            <button class="community-like-button" onclick="likeCommunityPhoto(${photo.id})">
                                ❤️ ${photo.likesCount}
                            </button>
                            <button class="community-download-button" onclick="downloadCommunityPhoto('${photo.photoUrl}', '${photo.username}_${photo.id}.jpg')">
                                ⬇️ 下载
                            </button>
                            ${photo.username === getCurrentUsername() ? 
                                `<button class="community-delete-button" onclick="deleteCommunityPhoto(${photo.id})">删除</button>` : 
                                ''}
                        </div>
                    </div>
                </div>
            </div>
        `).join('');
    }

    // 点赞社区照片
    async function likeCommunityPhoto(photoId) {
        try {
            const response = await fetch(`/api/community/photos/${photoId}/like`, {
                method: 'POST'
            });
            
            const result = await response.json();
            
            if (result.success) {
                // 更新点赞数显示
                const likeButton = document.querySelector(`[data-photo-id="${photoId}"] .community-like-button`);
                if (likeButton) {
                    likeButton.innerHTML = `❤️ ${result.likesCount}`;
                    likeButton.classList.add('liked');
                }
            } else {
                alert('点赞失败：' + result.message);
            }
        } catch (error) {
            alert('点赞失败：' + error.message);
        }
    }

    // 删除社区照片
    async function deleteCommunityPhoto(photoId) {
        if (!confirm('确定要删除这张照片吗？')) {
            return;
        }
        
        const username = getCurrentUsername();
        
        try {
            const response = await fetch(`/api/community/photos/${photoId}?username=${encodeURIComponent(username)}`, {
                method: 'DELETE'
            });
            
            const result = await response.json();
            
            if (result.success) {
                alert('照片删除成功！');
                loadCommunityPhotos();
            } else {
                alert('删除失败：' + result.message);
            }
        } catch (error) {
            alert('删除失败：' + error.message);
        }
    }

    // 下载社区照片
    function downloadCommunityPhoto(photoUrl, fileName) {
        // 创建一个隐藏的a标签用于下载
        const downloadLink = document.createElement('a');
        downloadLink.href = photoUrl;
        downloadLink.download = fileName;
        
        // 添加到DOM中
        document.body.appendChild(downloadLink);
        
        // 触发点击事件
        downloadLink.click();
        
        // 清理DOM
        document.body.removeChild(downloadLink);
        
        // 显示下载提示
        showDownloadNotification(fileName);
    }

    // 显示下载通知
    function showDownloadNotification(fileName) {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = 'download-notification';
        notification.innerHTML = `
            <div class="notification-content">
                <span class="notification-icon">⬇️</span>
                <span class="notification-text">正在下载: ${fileName}</span>
            </div>
        `;
        
        // 添加样式
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: #4CAF50;
            color: white;
            padding: 15px 20px;
            border-radius: 5px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            z-index: 1000;
            animation: slideIn 0.3s ease-out;
            font-family: Arial, sans-serif;
            max-width: 300px;
        `;
        
        // 添加到页面
        document.body.appendChild(notification);
        
        // 3秒后自动消失
        setTimeout(() => {
            notification.style.animation = 'slideOut 0.3s ease-in';
            setTimeout(() => {
                if (notification.parentNode) {
                    document.body.removeChild(notification);
                }
            }, 300);
        }, 3000);
    }
</script>

<script src="script.js?v=1.0.1"></script>
</body>
</html>